<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>time series demo</title>
    <link rel="stylesheet" href="niivue.css" />
    <style>
      .unstyled-button {
        border: none
        padding: 0
        background: #202020
        color: white
      }
    </style>
  </head>
  <body>
    <header>
      <button class="unstyled-button">Normalize Graph</button>
      <input
        type="checkbox"
        id="check1"
        value="true"
      />
      <button id="prevVolume">back</button>
      <button id="nextVolume">forward</button>
      &nbsp;<button id="animate">animate</button>
      &nbsp;<button id="thumbnail">toggle thumbnail</button>
    </header>
    <main id="container">
      <canvas id="gl1"></canvas>
    </main>
    <footer id="location">Click on image to hide thumbnail</footer>
  </body>
</html>
<script type="module">
  import * as niivue from "../dist/index.js"
  
  var volumeList1 = [
    // first item is background image
    {
      url: "../images/pcasl.nii.gz",
      colormap: "gray",
      opacity: 1,
      visible: true,
      frame4D: 2,
    },
  ]
  var nv1 = new niivue.Niivue({
    onLocationChange: handleLocationChange,
    thumbnail: "../images/pcasl.png",
  })
  await nv1.attachTo("gl1")
  nv1.setRadiologicalConvention(false)
  nv1.loadVolumes(volumeList1)
  nv1.setSliceType(nv1.sliceTypeMultiplanar)
  nv1.graph.autoSizeMultiplanar = true
  nv1.opts.multiplanarShowRender = niivue.SHOW_RENDER.ALWAYS
  nv1.graph.normalizeValues = false
  nv1.graph.opacity = 1.0
  check1.onchange = function () {
    nv1.graph.normalizeValues = this.checked
    nv1.updateGLVolume()
  }
  let currentVol = 0
  prevVolume.onclick = function () {
    currentVol = nv1.getFrame4D(nv1.volumes[0].id)
    currentVol--
    currentVol = Math.max(currentVol, 0)
    nv1.setFrame4D(nv1.volumes[0].id, currentVol)
  }
  nextVolume.onclick = function () {
    currentVol = nv1.getFrame4D(nv1.volumes[0].id)
    currentVol++
    currentVol = Math.min(currentVol, nv1.volumes[0].nFrame4D - 1)
    nv1.setFrame4D(nv1.volumes[0].id, currentVol)
  }
  function handleLocationChange(data) {
    document.getElementById("location").innerHTML =
      "&nbsp;&nbsp;" + data.string
  }
  var animationTimer = null
  function doAnimate() {
    currentVol = nv1.getFrame4D(nv1.volumes[0].id)
    currentVol++
    if (currentVol >= nv1.volumes[0].nFrame4D) currentVol = 0
    nv1.setFrame4D(nv1.volumes[0].id, currentVol)
  }
  animate.onclick = function () {
    if (animationTimer == null) animationTimer = setInterval(doAnimate, 100)
    else {
      clearInterval(animationTimer)
      animationTimer = null
    }
  }
  document.getElementById("gl1").addEventListener("dblclick", toggleThumbnail)
  function toggleThumbnail() {
    nv1.thumbnailVisible = !nv1.thumbnailVisible
    nv1.drawScene()
  }
  thumbnail.onclick = function () {
    toggleThumbnail()
  }
</script>
